<template>
  <div class="main-bg">
    <el-table
        :data="tableData"
        style="width: 100%"
        v-loading="loading"
      >
        <el-table-column
          prop="storeUserName"
          align="center"
          :show-overflow-tooltip="true"
          label="提交人">
        </el-table-column>
        <el-table-column
          prop="storeCoding"
          align="center"
          :show-overflow-tooltip="true"
          label="门店编号">
        </el-table-column>

        <el-table-column
          prop="opinionContent"
          align="center"
          :show-overflow-tooltip="true"
          label="意见">
        </el-table-column>
        <el-table-column
          prop="createTime"
          align="center"
          label="提交时间">
          <template slot-scope="scope">
            {{timestampToTime(scope.row.createTime)}}
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="操作"
          width="200"
          fixed="right"
          align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleDetail(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="pageNum"
        style="float: right;margin-top: 20px;"
        :page-size="10"
        background
        layout="total, prev, pager, next"
        :total="total">
      </el-pagination>
    <el-dialog title="查看"  :visible.sync="addFlag" width="80%" append-to-body class="my-label">
      <el-descriptions class="margin-top" :column="2" border>
        <el-descriptions-item label="提出人">{{ruleForm.storeUserName}}</el-descriptions-item>
        <el-descriptions-item label="意见详情">{{ruleForm.opinionContent}}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
  import {getMerchantOpinionListPage  } from '@/api/opinion/opinion'
  import { VueEditor } from "vue2-editor";
  export default {
    name: "notice",
    components: { VueEditor },
    data(){
      return{
        pageNum:1,
        checkFlag:false,
        tableData:[],
        total:0,
        loading:true,
        checkFrom:{},
        rules:{
          afficheTitle: [
            { required: true, message: '请输入公告标题', trigger: 'blur' }
          ],
          afficheContent: [
            { required: true, message: '请输入公告内容', trigger: 'blur' }
          ],

        },
        ruleForm:{

        },
        addFlag:false,
      }
    },
    mounted(){
      this.getList()
    },
    methods:{
      handleAdd(){
        this.addFlag=true
      },
      async getList(){
        let body={
          "pageSize": 10, //每页条数
          "pageNum": this.pageNum, //当前页
          table:{}
        }
        let res = await getMerchantOpinionListPage({body})
        this.loading=false
        this.tableData=res.body.list
        this.total=res.body.totalCount
      },
      handleDetail(row){
        this.addFlag=true
        this.ruleForm=row
      },
      handleCurrentChange(val){
        this.pageNum=val
        this.getList()
      },
      timestampToTime(timestamp) {
        var time = this.dayjs(timestamp).format("YYYY-MM-DD");
        // var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        // var Y = date.getFullYear() + '-';
        // var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        // var D = date.getDate() + ' ';
        return time;
      },
    }
  }
</script>

<style scoped>

</style>
